<template>
	<el-form  :model="form" label-width="80px" v-loading="loading" :rules="upFormRules" style="margin:20px;width:60%;min-width:600px;">
		<el-form-item label="模板名称" prop="name">
			<el-input v-model="form.name"></el-input>
		</el-form-item>
		<el-form-item label="推广模板" prop="content">
			<el-input type="textarea" v-model="form.content"></el-input>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="savePromoteTpl">立即更新</el-button>
		</el-form-item>
	</el-form>
</template>


<script>
	import { savePromoteTpl, getPromoteTpl } from '../../api/api';
	export default {
		data() {
			return {
				form: {
					name: '',
					content: ''
				},
				upFormRules: {
					name: [
						{ required: true, message: '名字不能为空', trigger: 'blur' }
					],
					content: [
						{ required: true, message: '模板不能为空', trigger: 'blur' }
					]
				},
				loading: false
			}
		},
		methods: {
			getPromoteTpl: function ()  {
				this.loading = true;
				getPromoteTpl().then((res) => {
					let { info, data } = res
					this.loading = false
					if (!info.ok) {
						this.$message({
						  message: info.message,
						  type: 'error',
						  duration: 1500
						});
						return
					}
					this.form.name = data.name;
					this.form.content = data.content;
					return
				})
			},
			savePromoteTpl: function () {
				savePromoteTpl(this.form).then((res) => {
					let { info, data } = res
					if (!info.ok) {
						this.$message({
						  message: info.message,
						  type: 'error',
						  duration: 1500
						});
					} else {
						this.$message({
						  message: "更新成功",
						  type: 'info',
						  duration: 1500
						});
					}
				});
				this.getPromoteTpl()
				console.log('submit!');
			}
		},
		mounted() {
			this.getPromoteTpl();
		}
	}

</script>